<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="../../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script src="../../../js/jquery-2.2.3.min.js"></script>
	<script src="../../../js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	
	<style type="text/css">
*{font-family:微软雅黑}
.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
 .alieditContainer{
        position: relative;
    } 
    
.sixDigitPassword {
    position: absolute;
    left: -122px;
    top: 0;   
    width: 1000px;
    height: 26px;  
    color: #fff;
    font-size: 12px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-user-select: initial;
    outline: 'none';
    z-index: 999;
    opacity:0;
    filter:alpha(opacity=0);
  }

  .sixDigitPassword-box {
      
        cursor:text;
        background: #fff;
        outline: none;
        position: relative;
        padding: 8px 0;
        height: 30px;
        border: 1px solid #cccccc;
        border-radius: 2px;
  }
  .sixDigitPassword-box i {
        float: left;
        display: block;
        padding: 4px 0;
        height: 13px;
        border-left: 1px solid #cccccc;
    }
   .sixDigitPassword-box .active {
        background: url('../../../images/password-blink.gif') no-repeat center center; 
    }
   .sixDigitPassword-box b {
        display: block;
        margin: 0 auto;
        width: 7px;
        height: 7px;
        overflow: hidden;
        visibility:hidden;
        background: url('../../../images/passeord-dot.png') no-repeat;
    }
  .sixDigitPassword-box span {
        position: absolute;
        display: block;
        left: 0px;
        top: 0px;
        height: 30px;
        border: 1px solid rgba(82, 168, 236, .8);
        border: 1px solid #00ffff\9;
        border-radius: 2px;
        visibility: hidden;
        -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    .ui-securitycore  .ui-form-item .ui-form-explain{
		margin-top: 8px; 
	}
  .i-block{
	display:inline-block;
  }
 .six-password{
    position: relative;
    height:33px;
    width:182px;
    overflow: hidden;
    vertical-align: middle;
    
}
.ly-paybtn {
	display: block;color: #fff;border: 0;
	width: 180px;
	background: #e83023;
	margin-top: 1rem;
	-moz-border-radius: 0.416rem;
	-webkit-border-radius: 0.416rem;
	border-radius: 0.416rem;
}
</style>
</head>
<body>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="quchu()">确认支付</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 17.5rem;margin: 10rem auto;">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">请输入支付密码</h4>
            </div>
            <div class="modal-body">
            	<div style="background: #fff;">
					<form action="" method="post" name="payPassword" id="form_paypsw">
						<div id="payPassword_container" class="alieditContainer clearfix" data-busy="0">
							<div class="i-block" data-error="i_error">
								<div class="i-block six-password">
									<input class="i-text sixDigitPassword" id="payPassword_rsainput" type="password" autocomplete="off" required="required" value="" name="payPassword_rsainput" data-role="sixDigitPassword" tabindex="" maxlength="6" minlength="6" aria-required="true">
									<div tabindex="0" class="sixDigitPassword-box" style="width: 180px;">
										<i style="width: 29px; border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>
										<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
										<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
										<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
										<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
										<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
										<span style="width: 29px; left: 0px; visibility: hidden;" id="cardwrap" data-role="cardwrap"></span>
									</div>
								</div>
							</div>
						</div>
		    		

					</form>
				</div>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script src="../../../js/jquery-validate.js" type="text/javascript"></script>
<script type="text/javascript">
	var _formPay = $('#form_paypsw');
			_formPay.validate({
					rules : {
						'payPassword_rsainput':{
							'minlength':6,
							'maxlength':6,
							required:true,
							digits : true,
							numPassword : true,
							echoNum :true
						}
					},
					
					messages:{
						'payPassword_rsainput':{
							'required' : '<i class="icon icon-attention icon-lg"></i>&nbsp;请填写支付密码',
							'maxlength' : '<i class="icon icon-attention icon-lg"></i>&nbsp;密码最多为{0}个字符',
							'minlength' : '<i class="icon icon-attention icon-lg"></i>&nbsp;密码最少为{0}个字符',
							'digits':'<i class="icon icon-attention icon-lg"></i>&nbsp;密码只能为数字',
							'numPassword' : '<i class="icon icon-attention icon-lg"></i>&nbsp;连号不可用，相同数字不可用（如：123456，11111）',
							'echoNum' :'<i class="icon icon-attention icon-lg"></i>&nbsp;连号不可用，相同数字不可用（如：123456，11111）'		
						}
					},
					errorPlacement : function(error, element) {
						element.closest('div[data-error="i_error"]').append(error);
					},	
					submitHandler : function(form){
						var _form = $(form);
						alert($("#payPassword_rsainput").val());
						form.submit();

					}
				});
				
var payPassword = $("#payPassword_container"),
    _this = payPassword.find('i'),	
	k=0,j=0,
	password = '' ,
	_cardwrap = $('#cardwrap');
	//点击隐藏的input密码框,在6个显示的密码框的第一个框显示光标
	payPassword.on('focus',"input[name='payPassword_rsainput']",function(){
	
		var _this = payPassword.find('i');
		if(payPassword.attr('data-busy') === '0'){ 
		//在第一个密码框中添加光标样式
		   _this.eq(k).addClass("active");
		   _cardwrap.css('visibility','visible');
		   payPassword.attr('data-busy','1');
		}
		
	});	
	//change时去除输入框的高亮，用户再次输入密码时需再次点击
	payPassword.on('change',"input[name='payPassword_rsainput']",function(){
		_cardwrap.css('visibility','hidden');
		_this.eq(k).removeClass("active");
		payPassword.attr('data-busy','0');
	}).on('blur',"input[name='payPassword_rsainput']",function(){
		
		_cardwrap.css('visibility','hidden');
		_this.eq(k).removeClass("active");					
		payPassword.attr('data-busy','0');
		
	});
	
	//使用keyup事件，绑定键盘上的数字按键和backspace按键
	payPassword.on('keyup',"input[name='payPassword_rsainput']",function(e){
	
	var  e = (e) ? e : window.event;
	
	//键盘上的数字键按下才可以输入
	if(e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){
			k = this.value.length;//输入框里面的密码长度
			l = _this.size();//6
			
			for(;l--;){
			
			//输入到第几个密码框，第几个密码框就显示高亮和光标（在输入框内有2个数字密码，第三个密码框要显示高亮和光标，之前的显示黑点后面的显示空白，输入和删除都一样）
				if(l === k){
					_this.eq(l).addClass("active");
					_this.eq(l).find('b').css('visibility','hidden');
					
				}else{
					_this.eq(l).removeClass("active");
					_this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');
					
				}				
			
			if(k === 6){
				j = 5;
			}else{
				j = k;
			}
			$('#cardwrap').css('left',j*30+'px');
		
			}
			if(k == 6){
				alert("监听到"+this.value);
			}
		}else{
		//输入其他字符，直接清空
			var _val = this.value;
			this.value = _val.replace(/\D/g,'');
		}
	});	
</script>
</html>